<template>
  <div class="apartment-manage">
    <h2>公寓管理</h2>
    
    <!-- 搜索栏 -->
    <div class="search-bar">
      <input 
        type="text" 
        v-model="searchQuery" 
        placeholder="搜索设施名称"
        @input="searchFacilities"
      >
      <select v-model="statusFilter" @change="filterByStatus">
        <option value="">全部状态</option>
        <option value="available">可用</option>
        <option value="under_maintenance">维护中</option>
        <option value="closed">关闭</option>
      </select>
    </div>

    <!-- 设施列表 -->
    <div class="card-container">
      <div class="card" v-for="item in facilities" :key="item.facilityId">
        <div class="status-badge" :class="item.status.toLowerCase()">
          {{ getStatusText(item.status) }}
        </div>
        <h3>{{ item.name }}</h3>
        <p>位置: {{ item.location }}</p>
        <p>描述: {{ item.description }}</p>
        <p>最后更新: {{ formatDate(item.updatedAt) }}</p>
        
        <!-- 维护记录 -->
        <h4>维护记录:</h4>
        <ul>
          <li v-for="maintenance in item.maintenances" :key="maintenance.maintenanceId">
            <p>维护日期: {{ formatDate(maintenance.maintenanceDate) }}</p>
            <p>详情: {{ maintenance.details }}</p>
            <p>费用: {{ maintenance.cost }} 元</p>
            <p>状态: {{ getMaintenanceStatusText(maintenance.status) }}</p>
          </li>
        </ul>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading">
      加载中...
    </div>
    
    <!-- 错误提示 -->
    <div v-if="error" class="error-message">
      {{ error }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'ApartmentManagePage',
  data() {
    return {
      allFacilities: [],
      facilities: [],
      loading: false,
      error: null,
      searchQuery: '',
      statusFilter: '',
      baseUrl: 'http://localhost:8080/api/facilities',
      searchTimer: null
    }
  },
  methods: {
    async fetchFacilities() {
      this.loading = true;
      this.error = null;
      try {
        const response = await fetch(this.baseUrl);
        if (!response.ok) {
          throw new Error('获取设施信息失败');
        }
        const data = await response.json();
        this.allFacilities = data;
        this.facilities = data;
        console.log('获取到的设施数据:', {
          count: data.length,
          sample: data[0]
        });
      } catch (err) {
        console.error('获取设施错误:', err);
        this.error = err.message;
      } finally {
        this.loading = false;
      }
    },

    searchFacilities() {
      clearTimeout(this.searchTimer);
      
      this.searchTimer = setTimeout(() => {
        const searchTerm = this.searchQuery.trim().toLowerCase();
        const statusFilter = this.statusFilter;
        
        if (!searchTerm && !statusFilter) {
          this.facilities = this.allFacilities;
          return;
        }
        
        this.facilities = this.allFacilities.filter(facility => {
          const matchesSearch = !searchTerm || 
            facility.name.toLowerCase().includes(searchTerm) ||
            facility.description.toLowerCase().includes(searchTerm) ||
            facility.location.toLowerCase().includes(searchTerm);
            
          const matchesStatus = !statusFilter || facility.status === statusFilter;
          
          return matchesSearch && matchesStatus;
        });
        
        console.log('搜索结果:', {
          searchTerm,
          statusFilter,
          resultCount: this.facilities.length
        });
      }, 300);
    },

    filterByStatus() {
      this.searchFacilities();
    },

    getStatusText(status) {
      const statusMap = {
        'available': '🟢 可用',
        'under_maintenance': '🟡 维护中',
        'closed': '🔴 关闭'
      };
      return statusMap[status] || status;
    },

    getMaintenanceStatusText(status) {
      const maintenanceStatusMap = {
        'completed': '已完成',
        'pending': '待处理'
      };
      return maintenanceStatusMap[status] || status;
    },

    formatDate(date) {
      if (!date) return '暂无记录';
      const options = {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      };
      return new Date(date).toLocaleString('zh-CN', options);
    }
  },
  created() {
    this.fetchFacilities();
  }
}
</script>

<style scoped>
.apartment-manage {
  padding: 20px;
}

.search-bar {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
}

.search-bar input,
.search-bar select {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.search-bar input {
  flex: 1;
  max-width: 300px;
}

.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  position: relative;
}

.status-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: white;
}

.status-badge.available {
  background-color: #42b983;
}

.status-badge.under_maintenance {
  background-color: #e6a23c;
}

.status-badge.closed {
  background-color: #f56c6c;
}

h2 {
  margin-bottom: 20px;
  color: #2c3e50;
}

h3 {
  color: #34495e;
  margin-bottom: 10px;
}

h4 {
  margin-top: 15px;
  color: #2c3e50;
}

p {
  margin: 5px 0;
  color: #666;
}

.loading {
  text-align: center;
  margin: 20px 0;
  color: #666;
}

.error-message {
  color: #f56c6c;
  text-align: center;
  margin: 20px 0;
  padding: 10px;
  background-color: #fef0f0;
  border-radius: 4px;
}

.maintenance-list {
  margin-top: 10px;
  border-top: 1px solid #eee;
  padding-top: 10px;
}

.maintenance-item {
  padding: 8px;
  margin: 5px 0;
  background: #f8f9fa;
  border-radius: 4px;
}

.status-badge {
  /* 调整徽章样式 */
  font-size: 0.8em;
  padding: 3px 6px;
}
</style> 